<template lang="">
  <div>
    <el-dialog
      title="设备详情"
      :visible="visible"
      width="62%"
      @close="$emit('warehouse_gate_dall', false)"
      center
    >
      <div>
        <!-- 仓位信息 -->
        <div class="engaged">
          <el-radio-group
            fill="#9a9c1b"
            class="engaged_group"
            v-model="checkboxGroup"
            @change="buttonFn(checkboxGroup)"
          >
            <el-radio-button
              class="engaged_item"
              :class="'bg_span_' + item.box_status"
              v-for="item in list"
              :label="item.box_sn"
              :key="item.box_sn"
            >
              <div :class="item.box_sn == checkboxGroup ? 'bgcred' : ''">
                <div class="quanButton">
                  <!-- 左 -->
                  <div class="zuobian">
                    <div
                      class="zuobianOne"
                      :class="'Bbg_span_' + item.box_status"
                    >
                      {{ item.box_sn }}号仓
                    </div>
                    <div class="zuobianImg">
                      <img
                        :src="
                          item.box_status === 5
                            ? require('/public/images/hui.png')
                            : item.box_status === 3
                            ? require('/public/images/hong.png')
                            : item.box_status === 2
                            ? require('/public/images/lu100.png')
                            : item.box_status === 1 && item.soc >= 95
                            ? require('/public/images/lan100.png')
                            : item.box_status == 1 && item.soc < 20
                            ? require('/public/images/lan0.png')
                            : item.box_status == 1 && item.soc < 40
                            ? require('/public/images/lan20.png')
                            : item.box_status == 1 && item.soc < 60
                            ? require('/public/images/lan40.png')
                            : item.box_status == 1 && item.soc < 80
                            ? require('/public/images/lan60.png')
                            : item.box_status == 1 &&
                              item.soc >= 80 &&
                              item.soc < 95
                            ? require('/public/images/lan80.png')
                            : item.box_status == 1 && item.soc >= 95
                            ? require('/public/images/lan100.png')
                            : ''
                        "
                        alt=""
                      />
                    </div>
                  </div>

                  <!-- 右 -->
                  <div class="youbian" :class="'Cbg_span_' + item.door_status">
                    <div class="youbianOne">
                      柜门状态：{{ item.door_status === 1 ? "开启" : "关闭" }}
                    </div>

                    <div>
                      仓门状态：{{
                        item.box_status === 1
                          ? "电池正在充电"
                          : item.box_status === 2
                          ? "电池充满"
                          : item.box_status === 3
                          ? "异常"
                          : item.box_status === 5
                          ? "无电池"
                          : "--"
                      }}
                    </div>
                    <p>电芯数量：{{ item.cell_sum || 0 }}个</p>
                    <p>电芯温度：{{ item.cell_t || 0 }}℃</p>
                    <!-- <p>
                      电芯电压：{{
                        Number(item.cell_v1) + Number(item.cell_v2) || 0
                      }}V
                    </p> -->
                    <p>充电时长：{{ item.charge_duration || 0 }}%</p>
                    <p>PCB温度：{{ item.pcb_t || 0 }}℃</p>
                    <p>电池外壳温度：{{ item.shell_t || 0 }}℃</p>
                    <p>电池电量：{{ item.soc || 0 }}%</p>
                    <p>电池健康值：{{ item.soh || 0 }}%</p>
                  </div>
                </div>
                <p class="quanButtonBt" :class="'Cbg_span_' + item.box_status">
                  {{ item.battery_sn || "电池编号暂无" }}
                </p>
                <div class="quanButtonTwo">
                  <div
                    v-if="item.cell_v1 && item.cell_v2"
                    class="quanButtonTwoThree"
                  >
                    电芯电压：
                    <div
                      v-for="(t, i) in item.cellList"
                      :key="i"
                      class="celllist"
                    >
                      <div class="celllist">{{ t }}</div>
                    </div>
                  </div>
                  <div v-else>电芯电压：暂无数据</div>
                </div>
              </div>
              <div class="quanButtonThree" :class="'Bbg_span_' + item.status">
                <div
                  class="quanButtonThreeOne"
                  @click="buttonClick(item, '开仓')"
                >
                  开仓
                </div>
                <!--  @click="buttonClick(item, '充电')"  @click="buttonClick(item, '停充')"  -->
                <div class="quanButtonThreeTwo">充电</div>
                <div class="quanButtonThreeThree">停充</div>
              </div>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chcekShow: false,
      chcekData: {
        id: "",
        status: null, //0 禁用 1恢复启用
        remark: "", //审核备注
      },
      chcekRules: {
        remark: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      checkboxGroup: "",
      list: [],
      fag: true,
      timer: null,
      id: "",
      numSS: "",
    };
  },
  destroyed() {
    this.fag = false;
    clearInterval(this.timer);
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    deviceId: {
      type: String,
      required: true,
    },
    res: {},
  },
  mounted() {
    if (this.deviceId) {
      this.cangmenFn(this.deviceId);
    }
  },

  methods: {
    // 拿到仓位号
    buttonFn(i) {
      console.log(567, i);
      this.numSS = i;
    },
    // 仓门信息
    async cangmenFn(cabinet_id) {
      let res = await this.apis.get_cabinet_box({
        cabinet_id: cabinet_id,
      });
      this.list = res.result;
      // this.$emit("warehouse_gate_dall", true);
      // 拿到电芯电压
      if (this.list.length !== 0) {
        this.list.forEach((item) => {
          item.cellList = [];
          if (item.cell_v1 && item.cell_v1) {
            let str = `${item.cell_v1},${item.cell_v2}`;
            let num = str.split(",");
            if (num.length !== 0) {
              num.forEach((t) => {
                let value = (t / 100).toFixed(2) + "v,"; // 将数字除以100并向下取整
                return item.cellList.push(value); // 将结果与单位"V"拼接起来
              });
            }
          }
        });
      }
      // console.log(666, this.list);
    },

    // 开仓、停充  、 充电
    async buttonClick(item, value) {
      if (value === "开仓") {
        let res = await this.apis.box_open({
          cabinet_id: item.cabinet_id,
          box_sn: item.box_sn,
        });
        this.$message({
          type: res.code == 0 ? "success" : "error",
          message: res.msg,
        });
        setTimeout(() => {
          this.cangmenFn(item.cabinet_id);
        }, 2100);
      } else if (value === "充电") {
        let res = await this.apis.start_charge({
          cabinet_id: item.cabinet_id,
          box_sn: item.box_sn,
        });
        this.$message({
          type: res.code == 0 ? "success" : "error",
          message: res.msg,
        });
        this.cangmenFn();
      } else if (value === "停充") {
        let res = await this.apis.stop_charge({
          cabinet_id: item.cabinet_id,
          box_sn: item.box_sn,
        });
        this.$message({
          type: res.code == 0 ? "success" : "error",
          message: res.msg,
        });
        this.cangmenFn();
      }
    },
  },
};
</script>

<style lang="scss">
.dialog_content_item {
  margin-bottom: 10px;
  font-size: 20px;
  display: flex;
  align-content: center;
  margin-right: 20px;
  // width: 50%;
}

.dialog_content_item > span {
  color: #3e8ef7;
  font-size: 20px;
}

.dialog_content_items {
  margin-bottom: 10px;
  font-size: 20px;
  display: flex;
  align-content: center;
  margin-right: 20px;
  width: 20%;
}

.dialog_content_items > span {
  color: #31d13e;
  font-size: 20px;
}

.engaged {
}

.engaged_group {
  display: flex;
  // justify-content: space-around;
  // font-size: 0.83rem;
  flex-wrap: wrap;
}

.engaged .engaged_title {
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
}

.engaged .cell_state {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.engaged .cell_state > div {
  margin-right: 20px;
}

.engaged .cell_state .incell::before,
.engaged .cell_state .nocell::before,
.engaged .cell_state .abound::before,
.engaged .cell_state .abnormal::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  background-color: #eb0c0c;
}

.engaged .cell_state .nocell::before {
  background-color: #e5e5e5;
}

.engaged .cell_state .abound::before {
  background-color: #37f31e;
}

.engaged .cell_state .abnormal::before {
  background-color: #2c39e7;
}

.engaged .engaged_title > div {
  font-size: 18px;
  display: flex;
  align-items: center;
}

.engaged .engaged_title .content {
  font-size: 22px;
  font-weight: 500;
  margin-right: 20px;
  font-weight: 700;
}

.engaged_item {
  width: 20%;
  min-width: 250px;
  color: #fff;
  font-size: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 18px;
  overflow: hidden;
  border: none;
  transition: 500ms;
  border: 1px solid #777;

  .quanButton {
    display: flex;
    justify-content: space-between;
    align-items: center;

    // 左
    .zuobian {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 10%;

      .zuobianOne {
        background: rgb(50, 120, 211);
        color: #fff;
        padding: 5px;
        font-size: 18px;
        border-radius: 8px;
        margin-bottom: 20px;
      }

      .zuobianImg {
        width: 40px;
        height: 70px;

        img {
          width: 100%;
        }
      }
    }

    // 右
    .youbian {
      font-size: 14px;
      line-height: 18px;
      text-align: left;
      position: relative;
      color: #000;

      .youbianOne {
      }

      .youbianTwo {
        border: none !important;

        .youbianTwoSw {
          transform: scale(0.9, 0.9);
        }
      }
    }
  }

  .quanButtonBt {
    color: #000;
    margin-top: 7px;
    border-bottom: 1px solid #666;
    padding-bottom: 5px;
  }

  .quanButtonTwo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5px;
    color: rgb(50, 120, 211);
    margin-bottom: 45px;

    .quanButtonTwoOne {
      background: rgb(50, 120, 211);
      color: #fff;
      padding: 5px;
      font-size: 15px;
      border-radius: 5px;
      margin-right: 10px;
    }

    .quanButtonTwoThree {
      margin-left: 20px;
      width: 200px;
      overflow: hidden; //超出部分隐藏
      white-space: nowrap; //禁止换行
      text-overflow: ellipsis; //省略号;
      .celllist {
        display: inline;
        // padding-right: 2px;
      }
    }
    .quanButtonTwoThree:hover {
      overflow: visible; /* 鼠标移入时显示全部内容 */
      white-space: normal; /* 允许内容换行 */
      text-overflow: clip; /* 移除省略号 */
    }
  }

  .quanButtonThree {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgb(50, 120, 211);
    color: #fff;
    padding: 5px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    right: 0;

    div {
      font-size: 14px;
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      box-shadow: -2px -2px 5px #444, 2px 2px 5px #222, inset 2px 2px 4px #444;
    }

    .quanButtonThreeOne {
      color: rgb(50, 120, 211);
      background-color: rgb(226, 226, 50);
    }

    .quanButtonThreeTwo {
      background-color: green;
    }

    .quanButtonThreeThree {
      background-color: red;
    }
  }
}

.el-radio-button__inner {
  width: 100%;
  border: 1px solid #888889;
  background-color: #fff !important;
}
.el-radio-button__inner:hover {
  // background-color: rgb(241, 163, 224) !important;
}

.bgcred {
  background-color: hsl(120, 7%, 89%) !important;
}
.bg_span_0 span {
  border: 1px solid #898888 !important;
}

.bg_span_1 span {
  border: 1px solid #008cd6 !important;
}

.bg_span_2 span {
  border: 1px solid #008cd6 !important;
}

.bg_span_3 span {
  border: 1px solid #eb0c0c !important;
}

.bg_span_4 span {
  border: 1px solid #f2a6aa !important;
}

// 颜色
.Bbg_span_0 {
  background-color: #898888 !important;
}

.Bbg_span_1 {
  background-color: #008cd6 !important;
}

.Bbg_span_2 {
  background-color: #008cd6 !important;
}

.Bbg_span_3 {
  background-color: #eb0c0c !important;
}

.Bbg_span_4 {
  background-color: #f2a6aa !important;
}

// 字体颜色
.Cbg_span_0 {
  color: #888889 !important;
}

.Cbg_span_1 {
  color: #008cd6 !important;
}

.Cbg_span_2 {
  color: #008cd6 !important;
}

.Cbg_span_3 {
  color: #eb0c0c !important;
}

.Cbg_span_4 {
  color: #f2a6aa !important;
}
.Cbg_span_10 {
  background-color: #1bf307 !important;
}

.imgss {
  width: 50px;
  height: 50px;
}

#l-map {
  height: 250px;
  width: 100%;
}

.textDisplay {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.textTwo {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 20px;

  .textTwoTit {
    margin-bottom: 10px;
  }
}

.topTitleBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 修改elementUI-switch组件 disabled样式 */
.el-switch.is-disabled {
  opacity: 1;
}
.el-switch.is-disabled .el-switch__core,
.el-switch.is-disabled .el-switch__label {
  cursor: pointer !important;
}
</style>
